# 基本选择器

1. 元素选择器

   ```
   元素 { 样式声明 }
   ```

2. 类选择器

   ```
   .类名 { 样式声明 }
   ```

3. ID选择器

   ```
   #ID属性值 { 样式声明}
   ```

4. 通配符选择器

   ```
   *{ 样式声明 }
   ```

5. 属性选择器

   | 选择器                        | 描述                                                         |
   | ----------------------------- | :----------------------------------------------------------- |
   | [attr]                        | 表示带有以 attr 命名的属性的元素。                           |
   | [attr=value]                  | 表示带有以 attr 命名的属性，且属性值为 value 的元素          |
   | [attr~=value]                 | 表示带有以 attr 命名的属性的元素，并且该属性是一个以空格作为分隔的值列表，其中至少有一个值为 value |
   | [attr\|=value]                | 表示带有以 attr 命名的属性的元素，属性值为“value”或是以“value-”为前缀开头 |
   | [attr^=value]                 | 表示带有以 attr 命名的属性，且属性值是以 value 开头的元素    |
   | [attr$=value]                 | 表示带有以 attr 命名的属性，且属性值是以 value 结尾的元素    |
   | [attr*=value]                 | 表示带有以 attr 命名的属性，且属性值至少包含一个 value 值的元素 |
   | [attr operator value i]       | 在属性选择器的右方括号前添加一个用空格隔开的字母 i（或 I），可以在匹配属性值时忽略大小写 |
   | [*attr* *operator* *value* s] | 在属性选择器的右方括号前添加一个用空格隔开的字母 `s`（或 `S`），可以在匹配属性值时区分大小写 |

   

# 关系选择器

1. 后代选择器

   ```
   元素A 元素B { 样式声明 }
   A元素（父亲）包含所有B元素(子孙元素)
   ```

2. 子选择器

   ```
   A元素 > B元素  { 样式声明 }
   A元素(父亲)包含B元素（儿子）
   ```

3. 相邻兄弟选择器

   ```
   A元素 + B元素 { 样式声明 }
   A元素（哥哥）紧挨着的上下B元素（亲弟弟）
   ```

4. 普通兄弟选择器

   ```
   A元素 ~ B元素 { 样式声明 }
   A元素（哥哥）同层级所有的B元素（弟弟）
   ```

5. 选择器列表

   ```
   A元素 , B元素 { 样式声明 }
   所有A元素和所有B元素
   ```

# 伪类选择器

## 01标签伪类 

| 伪类          | 案例               | 描述                                   |
| ------------- | ------------------ | -------------------------------------- |
| :link         | 元素:link          | 未被访问的元素                         |
| :visited      | 元素:visited       | 已被访问的元素                         |
| :hover        | 元素:hover         | 鼠标悬停在元素上时                     |
| :active       | 元素:active        | 鼠标按下按键和松开按键之间元素发生     |
| :focus        | 元素:focus         | 获得焦点的元素                         |
| :focus-within | 元素::focus-within | 元素自身或自己后代子元素获取焦点       |
| :root         | :root              | 文档的根元素即html                     |
| :target       | 元素:target        | 控制具有锚点目标元素的样式             |
| :empty        | 元素:empty         | 没有任何元素及空格文字情况下发生的样式 |
| :lang()       | 元素:lang(语言)    | 匹配使用特殊语言的元素                 |

## 02结构伪类

| 伪类                 | 案例                          | 描述                           |
| -------------------- | ----------------------------- | ------------------------------ |
| :first-child         | 父元素:first-child            | 父元素的首个子元素             |
| :first-of-type       | 父元素:first-of-type          | 父元素的特定类型首个子元素     |
| :last-child          | 父元素:last-child             | 父元素的最后一个子元素         |
| :last-of-type        | 父元素:last-of-type           | 父元素的特定类型最后一个子元素 |
| :only-child          | 父元素:only-child             | 父元素的唯一一个子元素         |
| :only-of-type        | 父元素:only-of-type           | 父元素的特定类型唯一一个子元素 |
| :nth-child(n)        | 父元素:nth-child(数量)        | 父元素的N个元素                |
| :nth-of-type(n)      | 父元素 :nth-of-type(数量)     | 父元素的特定类型N个元素        |
| :nth-last-child(n)   | 父元素::nth-last-child(数量)  | 父元素的倒数N个元素            |
| :nth-last-of-type(n) | 父元素:nth-last-of-type(数量) | 父元素的倒数特定类型N个元素    |

公式 n默认值：0

1. 父元素的第N个数量

   ```
   元素:伪类（数量）
   ```

2. 父元素的奇数子元素

   ```
   元素:伪类（2n+1）
   元素:伪类（odd）
   ```

3. 父元素的偶数子元素

   ```
   元素:伪类（2n）
   元素:伪类（even）
   ```

4. 父元素的第一个元素

   ```
   元素:伪类（0n+1）
   ```

5. 父元素的前A个元素

   ```
   元素:伪类（-n+数量A）
   ```

6. 父元素的第A个元素后面

   ```
   元素:伪类（n+数量A）
   ```

## 03表单伪类

| 伪类           | 案例               | 描述                                       |
| -------------- | ------------------ | ------------------------------------------ |
| :enabled       | 元素:enabled       | 启用元素样式                               |
| :disabled      | 元素:disabled      | 禁用元素样式                               |
| :default       | 元素::default      | 默认元素样式                               |
| :checked       | 元素:checked       | 已选中元素样式                             |
| :required      | 元素:required      | 有required属性的元素                       |
| :optional      | 元素:optional      | 没有required属性的元素                     |
| :valid         | 元素::valid        | 验证通过表单元素                           |
| :invalid       | 元素:invalid       | 验证不通过表单元素                         |
| :indeterminate | 元素:indeterminate | 不确定表单元素或js属性indeterminate是true  |
| :in-range      | 元素:in-range      | 元素的属性`min` 和`max` 限定的范围之内发生 |
| :out-of-range  | 元素:out-of-range  | 元素的属性`min` 和`max` 限定的范围之外发生 |
| :read-write    | 元素:read-write    | 可读可写属性的元素                         |
| :read-only     | 元素:read-only     | 只读属性元素                               |

## 04规则伪类

| 伪类   | 案例        | 描述           |
| ------ | ----------- | -------------- |
| :first | @规则:first | 规则第一页样式 |
| :left  | @规则:left  | 规则左边样式   |
| :right | @规则:right | 规则右边样式   |

# 伪元素选择器

| 元素           | 案例               | 描述                               |
| :------------- | ------------------ | ---------------------------------- |
| ::after        | 元素::after        | 元素后面插入内容                   |
| ::before       | 元素::before       | 元素前面插入内容                   |
| ::first-letter | 元素::first-letter | 元素的首字母                       |
| ::first-line   | 元素::first-line   | 元素的首行                         |
| ::placeholder  | 元素::placeholder  | 有placeholder(占位文本)属性的元素  |
| ::selection    | 元素::selection    | 元素被选中时或处于高亮状态的部分   |
| ::slotted()    | 元素::slotted()    | html的模板或插槽显示               |
| ::cue          | 元素::cue          | 元素在WebVTT(网络视频轨道格式)提示 |